<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            动画(animation)同样也是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

            相比于transtion来说，动画可以实现更多变化、更多控制，连续自动播放等效果

            动画的使用很简单：第一步定义动画，第二步调用动画。
        */

        /* 现在我提一个需求，我想页面一打开的时候，就有一个盒子从左边跑到右边去 */

        /* 
            1.用@keyframes 定义动画(类似于定义类选择器)
                语法: @keyframes 动画名称{
                    0%{
                        ...
                    }

                    100%{
                        ...
                    }
                }

                动画序列:
                    - 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
                    - 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的效果
                    - 动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数
                    - 请使用百分比来规定变化发生的时间，或者使用from和to, 效果等同于0%，100%
        */

        /* 1.定义动画，命名为move */
        @keyframes move{
            0%{
                transform: translate(0,0);
            }

            100%{
                transform: translateX(1000px);
            }
        }

        div{
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 
                2.调用动画
                    animation-name: 动画名称，你想用定义好的哪个动画
                    animation-duration: 动画持续时间，别忘记单位s或者ms
            */
            animation-name: move;
            animation-duration: 1s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>